<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="box">
			<view class="grid margin-bottom text-center col-1" >
				<view class="padding logo-box" style="margin-top: 20px;"></view>
			</view>
			
			<view style="width: 90%;margin:0 auto;position: relative;padding-bottom: 18px;" :style="{ paddingTop: iStatusBarHeight + 'px'}">
				<view class="cu-list menu-avatar" style="border-bottom:unset !important">
					<view class="cu-item radius">
						<view class="cu-avatar round lg" :style="[{ backgroundImage:'url(' + avatar + ')' }]"></view>
						<view class="content">
							<view class="text-black text-bold">金狗之家用户</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									ID:XXSADSADA
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
				<view style="position: absolute;top:48px;right:0px;" @click="share()" data-target="Modal7">
					<view class="level-num-button" style="float: right;height: 25px;line-height: 25px;">
						<view style="margin: 0 auto;font-size: 14px;font-weight: 600;">积分:111111</view>
					</view>
					<view class="level-num-button" style="margin-top: 30px;height: 25px;line-height: 25px;">
						<view style="margin: 0 auto;font-size: 14px;font-weight: 600;">代币：222222</view>
					</view>
				</view>
			</view>
			
			<view class="cu-list grid col-3 no-border card-menu margin-top-lg">
				<view class="cu-item" @click="jumpPage('/pages/index/fabu','n')">
					<view class="text-black text-bold">
						<text class="cuIcon-circlefill"></text>
					</view>
					
					<view class="text-black text-bold margin-top-sm">
						我的发布
					</view>
				</view>
				
				<view class="cu-item">
					<view class="text-black text-bold">
						<text class="cuIcon-circlefill"></text>
					</view>
					
					<view class="text-black text-bold margin-top-sm">
						邀请好友
					</view>
				</view>
				
				<view class="cu-item">
					<view class="text-black text-bold">
						<text class="cuIcon-circlefill"></text>
					</view>
					
					<view class="text-black text-bold margin-top-sm">
						积分明细
					</view>
				</view>
				
			</view>
			
			<view class="cu-bar">
				<view class="action sub-title">
					<text class="text-xl text-bold text-white">金狗官方信息</text>
					<text class="bg-white"></text>
					<!-- last-child选择器-->
				</view>
			</view>
			
			<view class="cu-list menu sm-border card-menu">
				<view class="cu-item">
					<view class="content">
						<text class="text-black">电报：</text>
					</view>
					<view class="action text-lg">
						<text class="text-black margin-right-sm">123456123456</text>
						<text class="text-green cuIcon-copy"></text>
					</view>
				</view>
				
				<view class="cu-item ">
					<view class="content">
						<text class="text-black">QQ：</text>
					</view>
					<view class="action text-lg">
						<text class="text-black margin-right-sm">123456123456</text>
						<text class="text-green cuIcon-copy"></text>
					</view>
				</view>
				
				<view class="cu-item ">
					<view class="content">
						<text class="text-black">推特：</text>
					</view>
					<view class="action text-lg">
						<text class="text-black margin-right-sm">123456123456</text>
						<text class="text-green cuIcon-copy"></text>
					</view>
				</view>
				
				<view class="cu-item ">
					<view class="content">
						<text class="text-black">官网</text>
					</view>
					<view class="action text-lg">
						<text class="text-black margin-right-sm">123456123456</text>
						<text class="text-green cuIcon-copy"></text>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
				iStatusBarHeight:0
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.title = 'MKKKKKK'
		},
		methods: {
			jumpPage(item, type) {
				if (item) {
					if (type == 's') {
						uni.switchTab({
							url: item
						})
					} else {
						uni.navigateTo({
							url: item
						});
					}
				} else {
					uni.showToast({
						title: "敬请期待",
						icon: "none"
					})
				}
			},
			share(){
				console.log(1);
			}
		}
	}
</script>

<style>
	.box{
		min-height: 100Vh;
		width: 100vw;
		background: #FFFFFF;
		background-image: url(../../static/xqbg.png);
		background-repeat: no-repeat;
		background-size:100% 100%;
		-moz-background-size:100% 100%;
	}
	
	.cu-list.menu-avatar>.cu-item:after {
		border-bottom: unset;
	}
	
	.my_page_box_num {
		width: 97%;
		height: 70px;
		margin: 0 auto;
		text-align: center;
		padding-top: 10px;
		background: #00BFFF;
		border-radius: 6px;
	}
	
	.my_page_box_num_title {
		font-size: 20px;
		color: #333333;
		font-weight: bold;
	}
	
	.my_page_box_num_item {
		margin-top: 6px;
		font-size: 16px;
		font-weight: 500;
		color: #7d7c7c;
	}
	
	.level-num-button{
		width: 100px;
		height: 56px;
		text-align: center;
		background:#5e8aed;
		color: #ffffff;
		border-radius: 28px 0 0 28px;
		padding-left: 4px;
	}
</style>
